<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>技师个人页</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <!--以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="asset/plugins/weui/css/weui.min.css">
    <link rel="stylesheet" href="asset/plugins/jquery-weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="asset/plugins/iconfont/iconfont.css">
    <link rel="stylesheet" href="asset/plugins/mescroll/mescroll.min.css">

    <link rel="stylesheet" href="asset/css/p-index.css">
</head>
<body>
<!--header 开始-->
<header class="m-page-header">
    <!--排行榜 开始-->
    <div class="m-ranking-list weui-flex js-msg-list">
        <div class="weui-flex__item m-ranking_content-wrap ">
            <ul class="m-ranking_content g-clearfix">
                <li>
                    <p class="m-ranking_content_comment">
                        <img src="asset/images/gift/gift.png" alt="" class="m-ranking_gift">
                        <img src="asset/images/gift/gift.png" alt="" class="m-ranking_gift">
                        <img src="asset/images/gift/gift.png" alt="" class="m-ranking_gift">
                        <span class="m-ranking_name">111用户姓名</span>
                        <img class="m-ranking_avatar g-img-bordered" src="asset/images/avatar/a9.jpg" alt="">
                        <span class="m-ranking_text">大官人豪掷千金，打赏</span>
                        <span class="m-ranking_name">工号21</span>
                        <img class="m-ranking_avatar g-img-bordered" src="asset/images/avatar/a9.jpg" alt="">
                        <span class="g-c--orange">礼物名字</span>
                        <img src="asset/images/gift/gift.png" alt="" class="m-ranking_gift">
                        <img src="asset/images/gift/gift.png" alt="" class="m-ranking_gift">
                        <img src="asset/images/gift/gift.png" alt="" class="m-ranking_gift">
                    </p>
                </li>

            </ul>
        </div>
        <div class="m-ranking_link-wrap">
            <a href="javascript:;" class="m-ranking_link weui-btn_orange open-popup" data-target="#rankingList"><i class="iconfont icon-paihangbang"></i><span>排行榜</span></a>
        </div>
    </div>
    <!--排行榜 结束-->
    <!--轮播图 开始-->
    <div class="swiper-container p-waiter-info">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="asset/images/avatar/timg.jpg" alt=""></div>
            <div class="swiper-slide"><img src="asset/images/avatar/timg.jpg" alt=""></div>
            <div class="swiper-slide"><img src="asset/images/avatar/timg.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <!--轮播图 结束-->

</header>
<!--header 结束-->
<!--内容 开始-->
<div class="p-waiter g-pt--10">
    <section class="m-container">
        <!--技师列表 开始-->
        <div class="weui-panel weui-panel_access m-weui-panel--waiter">
            <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">工号：021</h4>
                        <p class="weui-media-box__desc m-media_box_help g-c--orange">等级：金牌技师</p>
                        <p class="weui-media-box__desc">小妹技法娴熟，各位老板快来点我吧~</p>

                    </div>
                    <!--状态图片-->
                    <img class="p-waiter--waiting" src="asset/images/icon-global/Waiting.png" alt="">
                    <!--打赏数量-->
                    <div class="p-gift">
                        <img class="p-gift-img" src="asset/images/gift/gift.png" alt="礼物">
                        <p class="p-gift-text">× <span>321</span>已赏</p>
                    </div>
                    <!--评分-->
                    <div class="m-grade-wrap">
                        <p class="m-grade-label">评价：</p>
                        <div class="m-grade-stars">
                            <div class="m-grade_star">
                                <span class="m-grade_star_score">1.4</span>
                                <!--<div class="m-grade_star_bg">
                                    <div class="m-grade_star_num" style="width:25.2px"></div>
                                </div>-->
                            </div>
                        </div>
                    </div>

                </div>
                <div class="p-box-info">
                    <div class="p-title-info g-mb--10">
                        <hr class="g-hr">
                        <h5 class="p-title-info_text">个人信息</h5>
                    </div>
                    <ul class="m-list--text">
                        <li>资历：2年</li>
                        <li>服务：</li>
                        <li>足浴店：某某足浴店</li>
                        <li>工号：021</li>
                        <li>简介：</li>
                    </ul>
                </div>

            </div>
            <div class="weui-panel__ft">
                <a href="waiter.html" class="weui-cell weui-cell_access weui-cell_link">
                    <div class="weui-cell__bd g-fs--14 g-ta--c">返回店铺首页</div>
                    <span class="weui-cell__ft"></span>
                </a>
            </div>
        </div>

        <!--技师列表 结束-->
        <div class="weui-panel weui-panel_access weui-panel--comment">
            <div class="weui-panel__hd"><span>用户评论</span><a class="m-panel__hd_link" href="grade-all.html"><span>全部</span><i class="iconfont icon-enter"></i></a></div>
            <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <!--<p class="g-fs&#45;&#45;12 g-mt&#45;&#45;10 g-c&#45;&#45;gray">2017.06.13 14:00</p>-->
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <!--<p class="g-fs&#45;&#45;12 g-mt&#45;&#45;10 g-c&#45;&#45;gray">2017.06.13 14:00</p>-->
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <!--<p class="g-fs&#45;&#45;12 g-mt&#45;&#45;10 g-c&#45;&#45;gray">2017.06.13 14:00</p>-->
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
            </div>

        </div>
    </section>
</div>
<!--内容 结束-->
<a data-target="#comment-grade" href="javascript:;" class="m-btn-comment m-btn-shadow animated bounceInUp open-popup"><i class="iconfont icon-pinglun"></i><span>评论一下</span></a>
<a data-target="#reward" href="javascript:;" class="m-btn-award m-btn-shadow animated bounceInUp open-popup"><i class="iconfont icon-dashang"></i><span>打赏TA</span></a>
<a data-target="#letter" href="javascript:;" class="m-btn-letter m-btn-shadow animated bounceInUp open-popup"><i class="iconfont icon-xinfeng"></i><span>私信TA</span></a>
<!--弹出层-排行榜 start-->
<div id="rankingList" class="weui-popup__container weui-popup--foot-bath weui-popup--sm">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="m-modal_header">
            <h3 class="m-modal_title--img">打赏排行榜<img src="asset/images/img-global/dashangpaihangbang.png" alt=""></h3>
            <a href="javascript:;" class="m-modal_header_closed close-popup">
                <i class="iconfont icon-quxiao"></i>
            </a>
        </div>
        <div class="m-modal_body">
            <div class="g-overflow-wrap-y mescroll" id="js-popup-list">
                <div class="weui-cells m-cells--ranking" id="js-popup-list_inner">
                    <div class="weui-cell weui-cell_access">
                        <img class="m-ranking-num" src="asset/images/gift/first.png" alt="">
                        <div class="m-ranking-avatar">
                            <img class="m-avatar_top--draw" src="asset/images/icon-global/gold.png" alt="">

                            <img class="m-avatar_bottom" src="asset/images/avatar/a9.jpg" alt="">
                        </div>
                        <p class="m-ranking_nickname">
                            用户姓名
                        </p>
                        <div class="p-gift">
                            <img class="p-gift-img" src="asset/images/gift/gift.png" alt="礼物">
                            <p class="p-gift-text">×<span>321</span>打赏</p>
                        </div>
                        <p class="m-ranking_total">
                            累积打赏：<span>9999.00</span>元
                        </p>

                    </div>
                    <div class="weui-cell weui-cell_access">
                        <span class="m-ranking-num">2</span>
                        <div class="m-ranking-avatar">
                            <img class="m-avatar_bottom" src="asset/images/avatar/a9.jpg" alt="">
                        </div>
                        <p class="m-ranking_nickname">
                            用户姓名
                        </p>
                        <div class="p-gift">
                            <img class="p-gift-img" src="asset/images/gift/gift.png" alt="礼物">
                            <p class="p-gift-text">×<span>321</span>打赏</p>
                        </div>
                        <p class="m-ranking_total">
                            累积打赏：<span>9999.00</span>元
                        </p>

                    </div>
                    <div class="weui-cell weui-cell_access">
                        <span class="m-ranking-num">3</span>
                        <div class="m-ranking-avatar">
                            <img class="m-avatar_bottom" src="asset/images/avatar/a9.jpg" alt="">
                        </div>
                        <p class="m-ranking_nickname">
                            用户姓名
                        </p>
                        <div class="p-gift">
                            <img class="p-gift-img" src="asset/images/gift/gift.png" alt="礼物">
                            <p class="p-gift-text">×<span>321</span>打赏</p>
                        </div>
                        <p class="m-ranking_total">
                            累积打赏：<span>9999.00</span>元
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--弹出层-排行榜 end-->
<!--弹出层-评论 start-->
<!--<div id="comment" class="weui-popup__container weui-popup&#45;&#45;foot-bath weui-popup&#45;&#45;sm">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal weui-popup__modal&#45;&#45;footer">
        <div class="m-modal_header">
            <div class="weui-flex m-waiter-group">
                <div class="m-avatar">
                    <img class="g-img-circle g-img-bordered" src="asset/images/avatar/a9.jpg" alt="">
                </div>
                <div class="weui-flex__item">
                    <p class="m-waiter_title">工号：021</p>
                    <p class="m-waiter_side">等级：金牌技师</p>
                    <div class="p-gift">
                        <img class="p-gift-img" src="asset/images/gift/gift.png" alt="礼物">
                        <p class="p-gift-text">× <span>321</span>已赏</p>
                    </div>
                </div>
            </div>
            <a href="javascript:;" class="m-modal_header_closed close-popup">
                <i class="iconfont icon-quxiao"></i>
            </a>
        </div>
        <div class="m-modal_body">
            <div class="g-overflow-wrap-y">
                <div class="weui-panel weui-panel_access weui-panel&#45;&#45;comment weui-panel&#45;&#45;comment&#45;&#45;more">
                    <div class="weui-panel__bd">
                        <a class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd m-avatar m-avatar&#45;&#45;sm"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title m-comment_name">黄小江</h4>
                                <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！</p>
                            </div>
                            <p class="m-list-num">3楼</p>
                            <p class="m-comment-time">2017.07.04 17:33</p>
                            &lt;!&ndash;评分&ndash;&gt;
                            <div class="m-grade-wrap">
                                <div class="m-grade-stars">
                                    <div class="m-grade_star">
                                        <span class="m-grade_star_score">3.0</span>
                                        <div class="m-grade_star_bg">
                                            <div class="m-grade_star_num"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <a class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd m-avatar m-avatar&#45;&#45;sm"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title m-comment_name">黄小江</h4>
                                <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！</p>
                            </div>
                            <p class="m-list-num">3楼</p>
                            <p class="m-comment-time">2017.07.04 17:33</p>
                            &lt;!&ndash;评分&ndash;&gt;
                            <div class="m-grade-wrap">
                                <div class="m-grade-stars">
                                    <div class="m-grade_star">
                                        <span class="m-grade_star_score">4.0</span>
                                        <div class="m-grade_star_bg">
                                            <div class="m-grade_star_num"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <a class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd m-avatar m-avatar&#45;&#45;sm"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title m-comment_name">黄小江</h4>
                                <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！</p>
                            </div>
                            <p class="m-list-num">3楼</p>
                            <p class="m-comment-time">2017.07.04 17:33</p>
                            &lt;!&ndash;评分&ndash;&gt;
                            <div class="m-grade-wrap">
                                <div class="m-grade-stars">
                                    <div class="m-grade_star">
                                        <span class="m-grade_star_score">5.0</span>
                                        <div class="m-grade_star_bg">
                                            <div class="m-grade_star_num"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <a class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd m-avatar m-avatar&#45;&#45;sm"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title m-comment_name">黄小江</h4>
                                <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！</p>
                            </div>
                            <p class="m-list-num">3楼</p>
                            <p class="m-comment-time">2017.07.04 17:33</p>
                            &lt;!&ndash;评分&ndash;&gt;
                            <div class="m-grade-wrap">
                                <div class="m-grade-stars">
                                    <div class="m-grade_star">
                                        <span class="m-grade_star_score">3.0</span>
                                        <div class="m-grade_star_bg">
                                            <div class="m-grade_star_num"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <a class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd m-avatar m-avatar&#45;&#45;sm"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title m-comment_name">黄小江</h4>
                                <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！</p>
                            </div>
                            <p class="m-list-num">3楼</p>
                            <p class="m-comment-time">2017.07.04 17:33</p>
                            &lt;!&ndash;评分&ndash;&gt;
                            <div class="m-grade-wrap">
                                <div class="m-grade-stars">
                                    <div class="m-grade_star">
                                        <span class="m-grade_star_score">4.0</span>
                                        <div class="m-grade_star_bg">
                                            <div class="m-grade_star_num"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <a class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd m-avatar m-avatar&#45;&#45;sm"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title m-comment_name">工号：021</h4>
                                <p class="weui-media-box__desc">谢谢楼上~</p>
                            </div>
                            <p class="m-list-num">3楼</p>
                            <p class="m-comment-time">2017.07.04 17:33</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="m-modal_footer">
            <div class="m-textarea-group">
                <textarea class="weui-textarea" name=""  rows="3" placeholder="说点什么吧~"></textarea>
                <div class="weui-textarea-counter"><span>0</span>/200</div>
            </div>
            <a href="javascript:;" class="weui-btn weui-btn_orange">发表评论</a>
        </div>
    </div>
</div>-->
<!--弹出层-评论 end-->
<!--弹出层-打赏 start-->
<div id="reward" class="weui-popup__container weui-popup--foot-bath weui-popup--sm">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal weui-popup__modal--footer p-footer--reward">
        <div class="m-modal_header">
            <div class="weui-flex m-waiter-group">
                <div class="m-avatar">
                    <img class="g-img-circle g-img-bordered" src="asset/images/avatar/a9.jpg" alt="">
                </div>
                <div class="weui-flex__item">
                    <p class="m-waiter_title">工号：021</p>
                    <p class="m-waiter_side">等级：金牌技师</p>
                    <div class="p-gift">
                        <img class="p-gift-img" src="asset/images/gift/gift.png" alt="礼物">
                        <p class="p-gift-text">× <span>321</span>已赏</p>
                    </div>
                </div>
            </div>
            <a href="javascript:;" class="m-modal_header_closed close-popup">
                <i class="iconfont icon-quxiao"></i>
            </a>
        </div>
        <div class="m-modal_body">
            <div class="g-overflow-wrap-y">
                <ul class="m-reward-list js-reward-list g-clearfix">
                    <li class="active">
                        <a href="javascript:;" class="m-reward-item">
                            <i class="iconfont icon-shangpinxuankuang-xuanqu"></i>
                            <img src="asset/images/gift/gift.png" alt="">
                            <span class="g-c--red js-reward-money">￥1.99</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="m-reward-item">
                            <img src="asset/images/gift/gift.png" alt="">
                            <span class="g-c--red js-reward-money">￥2.12</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="m-reward-item">
                            <img src="asset/images/gift/gift.png" alt="">
                            <span class="g-c--red js-reward-money">￥4.60</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="m-reward-item">
                            <img src="asset/images/gift/gift.png" alt="">
                            <span class="g-c--red js-reward-money">￥2.00</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="m-reward-item">
                            <img src="asset/images/gift/gift.png" alt="">
                            <span class="g-c--red js-reward-money">￥3.21</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="m-modal_footer">
            <div class="p-reward-input-group">
                直接打赏TA：
                <div class="p-reward-input">
                    <input class="weui-input" id="moneyCustom" type="number" min="1" max="1000" pattern="^[1-9]+[0-9]{0,3}$" placeholder="自定义金额">
                    <input type="hidden" id="moneyTotal" name="password">
                </div>
                元
            </div>
            <div class="p-reward-help-wrap">
                <h4>~温馨提示~</h4>
                <p class="g-p-help">因为您的打赏，我们的技师将更优秀</p>
                <p class="g-p-help">所有打赏均为自愿</p>
                <p class="g-p-help">每次成功打赏后将有机会获得一次抽奖哦~</p></div>
            <a href="draw.html" class="weui-btn weui-btn_orange">确认支付<span class="js-change-num">￥16.88</span><small>（微信支付）</small></a>
        </div>
    </div>
</div>
<!--弹出层-打赏 end-->
<!--弹出层-私信 start-->
<div id="letter" class="weui-popup__container weui-popup--foot-bath weui-popup--sm">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal weui-popup__modal--footer">
        <div class="m-modal_header">
            <div class="weui-flex m-waiter-group">
                <div class="m-avatar">
                    <img class="g-img-circle g-img-bordered" src="asset/images/avatar/a9.jpg" alt="">
                </div>
                <div class="weui-flex__item">
                    <p class="m-waiter_title">工号：021</p>
                    <p class="m-waiter_side">等级：金牌技师</p>
                    <div class="p-gift">
                        <img class="p-gift-img" src="asset/images/gift/gift.png" alt="礼物">
                        <p class="p-gift-text">× <span>321</span>已赏</p>
                    </div>
                </div>
            </div>
            <a href="javascript:;" class="m-modal_header_closed close-popup">
                <i class="iconfont icon-quxiao"></i>
            </a>
        </div>
        <div class="m-modal_body">
            <div class="g-overflow-wrap-y">
                <div class="weui-panel weui-panel_access weui-panel--comment weui-panel--comment--more">
                    <div class="weui-panel__bd">
                        <a class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd m-avatar m-avatar--sm"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title m-comment_name">金玉满堂</h4>
                                <p class="weui-media-box__desc">美女，加个微信吗？</p>
                            </div>
                            <p class="m-list-num">3楼</p>
                            <p class="m-comment-time">2017.07.04 17:33</p>
                        </a>
                        <a class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd m-avatar m-avatar--sm"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title m-comment_name">金玉满堂</h4>
                                <p class="weui-media-box__desc">美女，加个微信吗？</p>
                            </div>
                            <p class="m-list-num">3楼</p>
                            <p class="m-comment-time">2017.07.04 17:33</p>
                        </a>
                        <a class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd m-avatar m-avatar--sm"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title m-comment_name">金玉满堂</h4>
                                <p class="weui-media-box__desc">美女，加个微信吗？</p>
                            </div>
                            <p class="m-list-num">3楼</p>
                            <p class="m-comment-time">2017.07.04 17:33</p>
                        </a>
                        <a class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd m-avatar m-avatar--sm"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title m-comment_name">金玉满堂</h4>
                                <p class="weui-media-box__desc">美女，加个微信吗？</p>
                            </div>
                            <p class="m-list-num">3楼</p>
                            <p class="m-comment-time">2017.07.04 17:33</p>
                        </a>
                        <a class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd m-avatar m-avatar--sm"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title m-comment_name">金玉满堂</h4>
                                <p class="weui-media-box__desc">在吗？</p>
                            </div>
                            <p class="m-list-num">3楼</p>
                            <p class="m-comment-time">2017.07.04 17:33</p>
                        </a>
                        <a class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd m-avatar m-avatar--sm"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title m-comment_name">工号：021</h4>
                                <p class="weui-media-box__desc">谢谢楼上~</p>
                            </div>
                            <p class="m-list-num">3楼</p>
                            <p class="m-comment-time">2017.07.04 17:33</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="m-modal_footer">
            <div class="m-textarea-group">
                <textarea class="weui-textarea" name="" id="" rows="3" placeholder="说点悄悄话吧，只有你和TA看得到哦~"></textarea>
                <div class="weui-textarea-counter"><span>0</span>/200</div>
            </div>
            <a href="javascript:;" class="weui-btn weui-btn_orange">@私聊TA</a>
        </div>
    </div>
</div>
<!--弹出层-私信 end-->
<!--非全屏-评分 start-->
<div id="comment-grade" class="weui-popup__container popup-bottom p-popup--grade">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="p-title-info p-draw">
                    <hr class="g-hr">
                    <h5 class="p-title-info_text">满意请打9分吧~</h5>
                </div>
            </div>
        </div>

        <div class="weui-flex p-draw-row">
            <div class="weui-flex__item">
                <ul class="m-grade-bar g-clearfix js-grade-bar">
                    <li><a href="javascript:;" class="m-grade-btn"><img src="asset/images/icon-global/5fen.png" alt=""><img class="p-hide" src="asset/images/icon-global/5fen1.png" alt=""></a></li>
                    <li><a href="javascript:;" class="m-grade-btn"><img src="asset/images/icon-global/6fen.png" alt=""><img class="p-hide" src="asset/images/icon-global/6fen1.png" alt=""></a></li>
                    <li><a href="javascript:;" class="m-grade-btn"><img src="asset/images/icon-global/7fen.png" alt=""><img class="p-hide" src="asset/images/icon-global/7fen1.png" alt=""></a></li>
                    <li><a href="javascript:;" class="m-grade-btn"><img src="asset/images/icon-global/8fen.png" alt=""><img class="p-hide" src="asset/images/icon-global/8fen1.png" alt=""></a></li>
                    <li><a href="javascript:;" class="m-grade-btn"><img src="asset/images/icon-global/9fen.png" alt=""><img class="p-hide" src="asset/images/icon-global/9fen1.png" alt=""></a></li>
                </ul>
                <input type="hidden" name="grade">
                <p class="m-help-text m-help-text--default js-grade-text g-ta--c">非常满意</p>
            </div>
        </div>

        <div class="weui-flex p-draw-row">
            <div class=""><p class="m-form-label">一句话点评：</p></div>
            <div class="weui-flex__item">
                <div class="m-input-group">
                    <i class="iconfont icon-xiangxiasanjiaoxialazhankai"></i>
                    <select class="weui-select js-select-grade" name="comment_select">
                        <option value="1">服务态度欠佳~</option>
                        <option value="2">也就这样吧~</option>
                        <option value="3">长得不错鼓励一下~</option>
                        <option value="4">人美，劲足，手法赞~</option>
                        <option selected value="5">多一分怕你骄傲呐~</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="p-draw-row">
            <div class="m-textarea-group m-textarea-group--bordered">
                <textarea class="weui-textarea js-textarea" name="comment_textarea" rows="3" maxlength="140" placeholder="还想说点什么吧~"></textarea>
                <div class="weui-textarea-counter js-textarea-counter"><span>0</span>/140</div>
            </div>
        </div>
        <div class="p-draw-row p-draw-footer">
            <a href="javascript:;" class="weui-btn weui-btn_orange">发表</a>
            <a href="javascript:;" class="weui-btn weui-btn_link weui-btn_orange close-popup">取消</a>
        </div>
    </div>
</div>
<!--非全屏-评分 end-->

<script src="asset/plugins/jquery/jquery-2.1.4.js"></script>
<script src="asset/plugins/jquery-weui/js/jquery-weui.min.js"></script>
<script src="asset/plugins/swiper/swiper.min.js"></script>
<script src="asset/plugins/mescroll/mescroll.min.js"></script>
<!--p-index.js-->
<script src="asset/js/p-waiter-info.js"></script>
<script src="asset/js/m-draw-bar.js"></script>
<script src="asset/js/m-grade-stars.js"></script>
<script>
$(function () {
    /*提交评分------------------------------------------------------*/



    /*联网加载列表数据*/
    function getListDataFromNet(json,pageNum, pageSize, successCallback, errorCallback) {
        //延时一秒,模拟联网
        $.ajax({
            type: 'GET',
//                    url: 'asset/data/data-index_shop-first.json',
            url: json+'?num=' + pageNum + "&size=" + pageSize,
            dataType: 'json',
            success: function (data) {
                //模拟分页数据
                var listData = [];
                for (var i = (pageNum - 1) * pageSize; i < pageNum * pageSize; i++) {
                    if (i == data.length) break;
                    listData.push(data[i]);
                }
                console.log(listData);
                successCallback(listData);
            },
            error: errorCallback
        });
    }

    /*弹出层-------------------------------------------------------------------------------*/
    var mescroll = new MeScroll("js-popup-list", { //第一个参数"mescroll"对应上面布局结构div的id
        up: {
            clearEmptyId: "js-popup-list_inner", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
            page:{size:2},
            loadFull:{
                use:true
            },
            callback: getListData //上拉加载回调,简写callback:function(page){upCallback(page);}
        }
    });

    function getListData(page) {
        //联网加载数据
        var json="asset/data/data-index_reward-first.json";
        console.log("page.num-list="+page.num);
        getListDataFromNet(json,page.num, page.size, function (data) {
            //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
            mescroll.endSuccess(data.length);//传参:数据的总数; mescroll会自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
            //设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
            setListData(data);
        }, function () {
            //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
            mescroll.endErr();
        });
    }

    /*设置列表数据*/
    function setListData(data) {
        var listDom = document.getElementById("js-popup-list_inner");

        for (var i = 0; i < data.length; i++) {
            var pd = data[i];
            var html_add = `<div class="weui-cell weui-cell_access">
                        <span class="m-ranking-num">${pd.num}</span>
                        <div class="m-ranking-avatar">
                            <img class="m-avatar_top--draw" src="${pd.first}" alt="">

                            <img class="m-avatar_bottom" src="${pd.img_src}" alt="">
                        </div>
                        <p class="m-ranking_nickname">${pd.waiterName}</p>
                        <div class="p-gift">
                            <img class="p-gift-img" src="asset/images/gift/gift.png" alt="礼物">
                            <p class="p-gift-text">×<span>${pd.popularity}</span>打赏</p>
                        </div>
                        <p class="m-ranking_total">
                            累积打赏：<span>${pd.money}</span>元
                        </p>
                    </div>`;
            $(listDom).append(html_add);
        }
    }
});
</script>
</body>
</html>